<template>
  <div>
    <el-row class="tac">

      <el-col :span="7" style="max-height: 200px" >
        <div style="padding: 10px;margin: 20px " >
          <span>菜单列表</span>
          <el-divider></el-divider>
          <div style="display: flex;align-items: center;">
            <el-input v-model="menusDto.name" placeholder="菜单名称"></el-input>
            <div style="flex: 1; margin: 0 10px;"></div>
            <el-button type="primary" @click="page">搜索</el-button>
            <el-button @click="cz">重置</el-button>
            <el-button type="danger" @click="delMenu" round>删除</el-button>
          </div >
          <div style="max-height:600px; overflow-y: auto; margin: 20px 0;">
          <el-tree
            class="filter-tree"
            :data="menuLists"
            :props="defaultProps"
            default-expand-all
            show-checkbox
            ref="tree"
            @node-click="handleNodeClick">
          </el-tree>
        </div>
        </div>
      </el-col>

      <el-col :span="10" class="border-left" >
        <div style="padding: 10px;margin: 20px ">
          <span>{{table1}}</span>
          <el-divider></el-divider>
          <div>
            <el-form ref="form" :model="menu" label-width="80px">
              <el-form-item label="上级菜单" prop="parent_id">
                <treeselect
                  v-model="menu.parent_id"
                  :options="from2"
                  :normalizer="normalizer"
                  :show-count="true"
                  placeholder="选择上级菜单"
                />
              </el-form-item>
              <el-form-item label="名称:">
                <el-input v-model="menu.name"></el-input>
              </el-form-item>
              <el-form-item label="路由Url:">
                <el-input v-model="menu.path"></el-input>
              </el-form-item>
              <el-form-item label="前端组件:" >
                <el-input v-model="menu.component" ></el-input>
              </el-form-item>
                <el-form-item label="菜单图标" prop="icon">
                  <el-popover
                    placement="bottom-start"
                    width="460"
                    trigger="click"
                    @show="$refs['iconSelect'].reset()"
                  >
                    <IconSelect ref="iconSelect" @selected="selected" :active-icon="menu.icon" />
                    <el-input slot="reference" v-model="menu.icon" placeholder="点击选择图标" readonly>
                      <svg-icon
                        v-if="menu.icon"
                        slot="prefix"
                        :icon-class="menu.icon"
                        style="width: 25px;"
                      />
                    </el-input>
                  </el-popover>
                </el-form-item>
              <el-form-item label="状态：">
                <el-radio-group v-model="menu.is_enable">
                  <el-radio label="1" value="1">启用</el-radio>
                  <el-radio label="0" value="0">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否公有:">
                <el-radio-group v-model="menu.is_public">
                  <el-radio label="1" value="1">是</el-radio>
                  <el-radio label="0" value="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="排序：">
                <el-input-number v-model="menu.sort_value" :min="1" :max="10" ></el-input-number>
              </el-form-item>
              <el-form-item label="分组：">
                <el-input v-model="menu.group_"></el-input>
              </el-form-item>
              <el-form-item label="描述:">
                <el-input v-model="menu.describe_" type="textarea" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addMenu" v-if="addupd">新增</el-button>
                <el-button type="warning" @click="updMenu" v-if="addupd==false">修改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>

      <el-col :span="7" class="border-right" >
        <div style="padding: 10px;margin: 20px ">
        <span>菜单权限配置</span>
        <el-divider></el-divider>
        <div style="align-items: center;">
          <el-input v-model="resourceDto.code" placeholder="编码"></el-input>
          <div style=" margin-top:5px;margin-bottom:5px"></div>
          <div style="display: flex">
            <el-input v-model="resourceDto.name" placeholder="名称"></el-input>
            <div style=" flex: 1; margin: 0 10px; "></div>
            <el-button type="primary" @click="page2">搜索</el-button>
          </div>

        </div>
        <el-table :data="resource" border style="width: 100% " ref="multipleTable" >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="code"
            label="编码"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="名称"
          ></el-table-column>
          <el-table-column
            prop="method"
            label="请求方式"
          ></el-table-column>
          <el-table-column
            prop="url"
            label="请求地址"
          ></el-table-column>

          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button slot="reference" size="mini"
                         type="text"
                         @click="outerVisible=true;addupd2=true;"
              >添加</el-button>
              <el-button slot="reference" size="mini"
                         type="text"
                         @click="updd(scope.row) "
              >修改</el-button>
              <el-button slot="reference" size="mini"
                         type="text"
                         @click="del2(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>

        </el-table>
          <el-pagination
            @size-change="size"
            @current-change="curren"
            :current-page="resourceDto.pageNum"
            :page-sizes="[5, 10, 20, 30]"
            :page-size=resourceDto.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

      </div>
      </el-col>

      <el-dialog :title="addupd2==true?'新增菜单权限配置':'修改菜单权限配置'" :visible.sync="outerVisible" class="custom-dialog"  :before-close="handleClose">
        <el-form ref="form" :model="authresource" label-width="80px">
          <el-form-item label="上级菜单" prop="ids">
            <treeselect
              v-model="authresource.menu_id"
              :options="from2"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择菜单"
            />
          </el-form-item>
          <el-form-item label="接口名称:">
            <el-input v-model="authresource.name"></el-input>
          </el-form-item>
          <el-form-item label="资源编码:" >
            <el-input v-model="authresource.code" ></el-input>
          </el-form-item>
          <el-form-item label="方法类型:">
            <el-input v-model="authresource.method"></el-input>
          </el-form-item>
          <el-form-item label="方法路径:">
            <el-input v-model="authresource.url"></el-input>
          </el-form-item>
          <el-form-item label="描述:">
            <el-input v-model="authresource.describe_" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add2" v-if="addupd2">新增</el-button>
            <el-button type="warning" @click="upd2" v-if="addupd2==false">修改</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>

import { listMenu, addMenu, updateMenu, menuById, pageResource, menuVos,delMenu,insertResource,deleteResource,updateResource } from '@/api/pd-auth/menu'
import menu from '@/views/system/menu/index.vue'
import IconSelect from '@/components/IconSelect/index.vue'
import icons from '@/components/IconSelect/requireIcons'
import Treeselect from '@riophae/vue-treeselect'
import user from '@/store/modules/user'
export default {
  components: { Treeselect, IconSelect },
  data() {
    return {
      user: user.state,
      addupd2:true,
      authresource:{
        id:'',
        code:'',
        name:'',
        menu_id:'',
        method:'',
        url:'',
        describe_:'',
        create_user:'',
        create_time:'',
        update_user:'',
        update_time:'',
      },//菜单权限配置
      addpud:true,
      outerVisible:false,
      from2:[],//下拉菜单
      total: 0,
      resource:[],
      resourceDto:{
        pageNum:1,
        pageSize:5,
        name:'',
        code:'',
        menuId:'',
      },
      menu1:{},
      addupd:true,
      menu:{
        id:'',
        parent_id:"0",
        name:'',
        path:'',
        component:'',
        icon:'',
        is_public:"0",
        is_enable:"1",
        sort_value:1,
        group_:'',
        describe_:'',
        create_user:'',
        create_time:'',
        update_user:'',
        update_time:'',
      },
      menu2:{
        ids:'',
        pids:'0',
        parent_id:0,
        name:'',
        path:'',
        component:'',
        icon:'',
        is_public:"0",
        is_enable:"1",
        sort_value:1,
        group_:'',
        describe_: '',
      },
      table1:"新增菜单",
      menuLists: [],
      // 菜单树选项
      menuOptions: [],
      menuDto: {},
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      menusDto:{
        name:''
      },
      data:[]
    }
  },


  //创建生命周期
  created() {
    this.page()
    this.menu1=this.menu
  },


  methods: {
    updd(val){
      this.outerVisible=true;
      this.addupd2=false
      this.authresource=val
    },

    del2(val){
        this.$confirm('确定要删除该菜单配置吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteResource(val.id)
          this.page2()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },

    add2(){
      this.authresource.create_user=this.user.id
      this.authresource.update_user=this.user.id
      insertResource(this.authresource).then(as=>{
        this.outerVisible=false
        this.outerVisible=false
        this.authresource={}
        this.page2()
      })
      this.$message({
        type: 'success',
        message: '添加菜单配置成功!'
      });

    },

    upd2(){
      this.authresource.update_user=this.user.id
      this.$confirm('确定要修改该菜单配置吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          updateResource(this.authresource).then(res=>{
            this.outerVisible=false;
            this.addupd2=true
            this.authresource={}
            this.page2()
          })
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },

    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.list
      };
    },

    /**
     * 删除选中的菜单
     */
    delMenu(){
      const checkedNodes = this.$refs.tree.getCheckedNodes(true);
      const checkedIds = checkedNodes.map(node => node.id);
     if (checkedIds.length == 0) {
       this.$confirm('请选择要删除的菜单?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       })
     }else {
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         for (let i = 0; i < checkedIds.length; i++) {
           delMenu(checkedIds[i])
         }
         this.page()
         this.$message({
           type: 'success',
           message: '删除成功!'
         });
       }).catch(() => {
         this.$message({
           type: 'info',
           message: '已取消删除'
         });
       });
     }
    },

    /**
     * 选择图标
      */

    selected(name) {
      this.menu.icon = name;
    },

    page2(){
      pageResource(this.resourceDto).then(as=>{
        this.resource=as.data.list
        this.total=as.data.total
      })
    },

    //弹框关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.outerVisible=false;
          this.addupd2=true
          this.authresource={}
          done();
        })
        .catch(_ => {
        });
    },

    //修改
    updMenu(){
      this.$confirm('此操作将修改该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.menu.create_user=this.user.id
        this.menu.update_user=this.user.id
        updateMenu(this.menu).then(aa=>{
          this.menu={}
          this.menu.is_public="0"
          this.menu.is_enable="1"
          this.menu.sort_value=1
          this.page()
        })

        this.$message({
          type: 'success',
          message: '修改成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });

    },

    //新增
    addMenu(){
      this.$confirm('确定要添加该菜单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.menu.create_user=this.user.id
        this.menu.update_user=this.user.id
        addMenu(this.menu).then(as=>{
          this.menu={}
          this.menu.is_public="0"
          this.menu.is_enable="1"
          this.menu.sort_value=1
          this.page()
        })
        this.$message({
          type: 'success',
          message: '新增成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消新增'
        });
      });

    },

    //重置
    cz(){
      this.menusDto.name=''
      this.page()
      this.menu={}
      this.menu.is_public="0"
      this.menu.is_enable="1"
        this.menu.sort_value=1
      this.parent_id="0"
      this.addupd=true
      this.table1="新增菜单"
        this.resource=[]
    },

    //点击菜单
    handleNodeClick(data){
      menuById(data.id).then(as=>{
        this.menu.id=as.data.id
        this.menu.name=as.data.name
        this.menu.icon=as.data.icon
        this.menu.path=as.data.path
        this.menu.component=as.data.component
        this.menu.is_public=as.data.is_public.toString()
        this.menu.is_enable=as.data.is_enable.toString()
        this.menu.sort_value=as.data.sort_value
        this.menu.group=as.data.group_
        this.menu.describe_=as.data.describe_
        this.menu.parent_id=as.data.parent_id
        //设置id,父id
        this.table1="修改菜单"
        this.addupd=false
        this.resourceDto.menuId=this.menu.id
        this.page2()
      })

    },

    //页面显示菜单树
    page(){
      listMenu(this.menusDto).then(ass=>{
        this.menuLists=ass.data
      })
      menuVos().then(ass=>{
        this.from2=ass.data
      })
      console.log(this.user)
    },
    size(val) {
      this.resourceDto.pageSize = val
      this.page2()
    },

    curren(val) {
      this.resourceDto.pageNum=val
      this.page2()
    },
  }
}
</script>

<style>
.border-right {
  border-right: 1px solid slategray;
}
.border-left {
  border-left: 1px solid slategray;
  border-right: 1px solid slategray;
}
</style>
